import Taro from "@tarojs/taro";
import GpContainer from "@/components/GpContainer";
import GpFontIcon from "@/components/GpFontIcon";
import { useNavigateEventChannel } from "@/hooks/useNavigateEventChannel";
import { useAuthStore } from "@/store";
import { privatifyMobile } from "@/utils/helper";
import { Button, Form, FormProps, Input, InputProps, Text, View } from "@tarojs/components";
import { useState } from "react";
import { useVerifyCode } from "../composables/useVerifyCode";
import { postMySendchangemobilecode } from "@/apis/endpoint/my";
import { navigate } from "@/utils/navigation";

export default function Index() {
  const userMobile = useAuthStore(state => state.userInfo?.mobile)
  const { eventChannel } = useNavigateEventChannel()
  const [mobile, setMobile] = useState("")
  const { remain, running, triggerSend } = useVerifyCode(60, mobile => postMySendchangemobilecode({mobile}).send())
  const syncMobile: InputProps['onInput'] = ({detail: {value}}) => {
    setMobile(value)
  }
  const handleSubmit: FormProps['onSubmit'] = ({detail: {value}}) => {
    if (!value!.mobile) {
      Taro.showToast({
        title: "请输入新手机号",
        icon: "none"
      })
      return
    }
    if (!value!.mobileCode) {
      Taro.showToast({
        title: "请输入短信验证码",
        icon: "none"
      })
      return
    }
    eventChannel && eventChannel.emit("acceptMobile", value)
    navigate()
  }
  return (
    <GpContainer className="bg-white">
      <View className="flex flex-row items-center box-border pl-[32px] pr-[40px] h-[84px] bg-[#FD9900]/8">
        <GpFontIcon name="icon-zhuyi" color="#FD9900" size={32} className="mr-[8px]" />
        <Text className="text-[28px] leading-[28px] text-[#FD9900] flex-1">
          每30天可修改1次，您还可以修改1次
        </Text>
        <GpFontIcon name="icon-guanbi" color="#FD9900" size={48} className="ml-[8px]" />
      </View>
      <Form className="box-border px-[32px] flex flex-col mt-[72px]" onSubmit={handleSubmit}>
        <Text className="text-primary text-[48px] leading-[48px] font-bold">修改手机号</Text>
        <View className="mt-[28px] text-[28px] leading-[36px] text-third flex flex-col">
          <Text>修改手机号码后，可以使用新手机号登录智聘，聊天时“交换电话”功能的手机号会一同修改</Text>
          <Text>当前手机号：{userMobile ? privatifyMobile(userMobile) : "--"}</Text>
        </View>
        <View className="border-b border-solid border-b-[#EEEEEE] py-[40px] flex flex-row items-center">
          <Text className="text-primary text-[32px] mr-[24px]">+86</Text>
          <Input name="mobile" placeholder="请输入新手机号" className="border-0 outline-0 text-primary text-[32px] flex-1" type="number" value={mobile} onInput={syncMobile} />
        </View>
        <View className="border-b border-solid border-b-[#EEEEEE] py-[40px] flex flex-row items-center">
          <Input name="mobileCode" placeholder="请输入短信验证码" className="border-0 outline-0 text-primary text-[32px] flex-1" type="number" />
          <Text className="text-theme text-[32px] ml-[24px]" onClick={() => triggerSend(mobile)}>
            { running ? `${remain}s重新发送` : "获取验证码" }
          </Text>
        </View>
        <Button formType="submit" className="text-center bg-theme h-[80px] leading-[80px] box-border rounded-[64px] mt-[64px]">
          <Text className="text-white text-[32px]">保存</Text>
        </Button>
      </Form>
    </GpContainer>
  )
}
